<template>

  <div>
    <el-button type="primary" @click="router.back()">返回主页</el-button>
  </div>
  <div>
    <div style="color: blueviolet">
      sjkjdkasjdkajdkasjdkajdak
    </div>

    <div style="font-size: 30px">
      {{ a }}
      {{ b }}
    </div>

    <div>
      {{ data.a }}
      {{ data.b }}
    </div>

    <div style="font-size: 30px">
      <span style="color: olive" v-if="data.name === 'xx'">xx</span>
      <span style="color: blueviolet" v-if="data.name === 'yy'">yy</span>
      <span style="color: saddlebrown" v-else>bb</span>
    </div>
    <div style="margin-bottom: 10px">
      <input v-model="data.b">
    </div>

    <div style="display:flex ">
      <div @click="show(item)"
           v-for="item in data.ds"
           style="width: 300px;height: 200px;font-size:20px;line-height: 202px;text-align: center;background-color: olivedrab;margin-right: 10px"
      >{{ item }}
      </div>
    </div>

    <div style="margin-bottom: 10px">
      <select style="width: 100px">
        <option v-for="intm in data.dds">{{ intm }}</option>
      </select>

      <div>
        <button @click="click">加v</button>
      </div>

      <div style="margin-bottom: 10px">
        <div :style="data.box"></div>
        <div >
          <img :src="data.img" :style="data.imgsize"
               alt="" >
        </div>
      </div>

      <div style="margin-bottom: 10px">
        <el-button bg  round plain >Default</el-button>
        <el-button color="#626aef"  @click="click_1">Default </el-button>
        <el-button type="primary" @click="click" :style="'color: black '" round>点击</el-button>

      </div>

      <div style="color: black">
        <el-icon :size="20">
          <Edit />
        </el-icon>
        <el-icon :style="'margin-right: 10px'"><Star /></el-icon>
        <span >
          <el-icon :style="'top:4px'"><View /></el-icon>100
        </span>
        <el-button type="danger" :icon="Delete" circle />
        <el-button type="primary" @click="delect" :icon="Delete  " />

        <el-input
            v-model="a"
            class="w-50 m-2"
            placeholder="Pick a date"
            :suffix-icon="Calendar"
        />
        <el-input
            v-model="b"
            class="w-50 m-2"
            placeholder="Type something"
            :prefix-icon="Search"
        />
      </div>

    </div>
  </div>
</template>

<script  setup>
import {reactive, ref, onMounted,} from "vue";
import {Delete, Calendar, Search} from "@element-plus/icons-vue";
import router from "@/router";


onMounted(() => {
  //alert("web furnish")
  console.log("web furnish")
})

const a = ref(1)
const b = ref("jdskadj")

const data = reactive({
  id: router.currentRoute.value.query.id,
  name1: router.currentRoute.value.query.name1,
  a: 23,
  b: "dssssss",
  name: 'ss',
  ds: [2, 5, 6],
  dds: ["重庆", "广州", "长沙"],
  box: {
    width: '100px',
    height: '100px',
    background: 'pink'
  },

  img: 'https://img2.baidu.com/it/u=1511634168,936845908&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=1083',

  imgsize: {
    width: 'auto',
    height: '200px'
  }
})

console.log("id======="+data.id+"=====nam1===="+data.name1+new Date())
const click = () => {
  alert("123@qq.com")
}
const show = (vlaue) => {
  alert(vlaue)
}

const click_1 = ()=>{
  alert("yoyoyo")
}
const delect = ()=>{
  alert("delect complete")
}

</script>
